<template>
    <!-- 页面 -->
    <div class="import-table page">
        <!-- 搜索 -->
        <transition
            @before-enter="_beforeEnter"
            @enter="_enter"
            @after-enter="_afterEnter"
            @before-leave="_beforeLeave"
            @leave="_leave"
            @after-leave="_afterLeave"
        >
            <div
                class="search-contener"
                ref="searchContener"
                v-show="searchFormConfig.searchContenerShow"
            >
                <base-form
                    :formItems="searchFormConfig.formItems"
                    :formData="searchFormConfig.formSubmit"
                    ref="searchForm"
                    @onButtonClick="searchBarButtonClick"
                />
            </div>
        </transition>
        <!-- 表格 -->
        <div class="datas-contener">
            <!-- 表格展示项 -->
            <div class="table-contener">
                <base-table
                    ref="baseTable"
                    :tableData="baseTableConfig.tableData"
                    :tableHeader="baseTableConfig.tableHeader"
                    :tableConfig="baseTableConfig.tableConfig"
                    @handleSelection="tableDataSelected"
                />
            </div>
            <!-- 分页 -->
            <div class="paging-contener">
                <pagin-ation
                    :size="paginationConfig.size"
                    :total="paginationConfig.total"
                    :type="paginationConfig.type"
                    :currentPage="paginationConfig.currentPage"
                    @PageNumber="pageNumberChange"
                    @PageSize="pageSizeChange"
                />
            </div>
        </div>
    </div>
</template>
<script>
import BaseForm from '@/components/baseForm/index'
import BaseTable from '@/components/baseTable/index'
import PaginAtion from '@/components/pagination/index'
import { importTable } from '@/http/apis/tool/gen/index'
import { pageTables } from '@/http/apis/tool/dmd/busModel'
import { setFormItemProp, setSelectFormart } from '@/utils/tool'
import { getDataSourceSelectData } from '@/http/apis/system/dataSource/index'
import globalMixin from '@/mixins/global'
export default {
    mixins: [globalMixin],
    components: {
        BaseForm,
        BaseTable,
        PaginAtion
    },
    data() {
        return {
            dataSourceList: [],
            // 搜索表单配置
            searchFormConfig: {
                formItems: [
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择数据源',
                            label: '数据源',
                            prop: 'datasourceId',
                            width: 'w-auto',
                            options: []
                        },
                        {
                            ltype: 'input', // 大类型（input）
                            placeholder: '请输入表名称', // 文字提示
                            label: '表名称',
                            prop: 'tableName', // 绑定的key
                            width: 'w-auto'
                        },
                        {
                            ltype: 'input', // 大类型（input）
                            placeholder: '请输入表描述', // 文字提示
                            label: '表描述',
                            prop: 'tableComment', // 绑定的key
                            width: 'w-auto'
                        },

                        {
                            ltype: 'button', // 大类型（input）
                            type: 'primary',
                            text: '搜索', // 文字提示
                            prop: 'searchDatas', // 绑定的key
                            icon: 'el-icon-search',
                            width: 'w-auto',
                            loading: false
                        },
                        {
                            ltype: 'button', // 大类型（input）
                            type: 'default',
                            text: '重置', // 文字提示
                            prop: 'resetSearchForm', // 绑定的key
                            icon: 'el-icon-refresh-right',
                            width: 'w-auto'
                        }
                    ]
                ],
                formSubmit: {
                    datasourceId: '0',
                    tableName: '',
                    tableComment: ''
                },
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: 'auto'
                },
                // 搜索控件是否显示
                searchContenerShow: true
            },
            // 表格配置
            baseTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        type: 'selection',
                        width: 50,
                        fixed: 'left',
                        label: '选择',
                        visible: true
                    },
                    {
                        prop: 'tableName',
                        label: '表名称',
                        visible: true
                    },
                    {
                        prop: 'remarks',
                        label: '表描述',
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                },
                // 选中的表格数据
                tableCheckedDatas: []
            },
            // 分页配置
            paginationConfig: {
                type: 'md',
                size: 10,
                currentPage: 1,
                total: 100
            },
            // 查询表格数据的参数
            queryTableParams: {
                pageNo: 1,
                pageSize: 10,
                entity: {}
            }
        }
    },
    created() {
        this.initPage()
    },
    methods: {
        /**
         * 页面开始
         */
        async initPage() {
            // 查询数据源列表
            await this.queryDataSourceList()
            //数据源搜索字段设置默认值
            this.setFormsItems()
            //初始化参数
            this.initQueryParmas()
            //查询表格数据
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 查询表格数据
         */
        async queryTableData(params) {
            this.baseTableConfig.tableConfig.loading = true
            try {
                let res = await pageTables(params)
                if (res.data) {
                    this.baseTableConfig.tableData = res.data.list
                    this.paginationConfig.total = res.data.totalCount
                } else {
                    this.baseTableConfig.tableData = []
                    this.paginationConfig.total = 0
                }
                this.baseTableConfig.tableConfig.loading = false
            } catch (error) {
                this.baseTableConfig.tableConfig.loading = false
            }
        },
        /**
         * 数据源列表查询
         */
        async queryDataSourceList() {
            try {
                let res = await getDataSourceSelectData()
                this.dataSourceList = res.data
            } catch (error) {
                this.dataSourceList = []
            }
        },
        /**
         * 表格数据被选中
         */
        tableDataSelected(rows) {
            this.baseTableConfig.tableCheckedDatas = rows
        },
        /**
         * 初始化查询参数
         */
        initQueryParmas() {
            this.queryTableParams = {
                pageNo: 1,
                pageSize: 10,
                entity: {
                    ...this.searchFormConfig.formSubmit
                }
            }
            this.paginationConfig.size = 10
            this.paginationConfig.currentPage = 1
            this.baseTableConfig.tableData = []
        },

        /**
         * 页码变化
         */
        pageNumberChange(e) {
            this.queryTableParams.pageNo = e
            this.paginationConfig.currentPage = e
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 页大小变化
         */
        pageSizeChange(e) {
            // 页大小变化时，将当前页码设置为0
            this.queryTableParams.pageNo = 1
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableParams.pageSize = e
            this.queryTableData(this.queryTableParams)
        },

        /**
         * 搜索栏相关
         */
        /**
         * 搜索栏按钮点击
         * @param {Object} params
         */
        searchBarButtonClick(params) {
            // 清空查询参数
            this.initQueryParmas()
            try {
                this[params.prop]()
            } catch (error) {
                throw new Error(error)
            }
        },

        /**
         * 重置搜索表单
         */
        resetSearchForm() {
            // 查询参数初始化
            this.initQueryParmas()
            // 重置搜索表单
            this.$refs.searchForm.resetForm()
            // 查询数据
            this.refreshTableData()
        },

        /**
         * 搜索数据
         */
        searchDatas() {
            this.$refs.searchForm.submitForm(() => {
                // 清空查询参数
                this.initQueryParmas()
                // 组装查询条件
                this.queryTableParams.entity = {
                    ...this.searchFormConfig.formSubmit
                }
                // 查询数据
                this.queryTableData(this.queryTableParams)
            })
        },
        /**
         * 刷新表格数据
         */
        refreshTableData() {
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 设置表单的表单项
         */
        async setFormsItems() {
            // 重新设置新增、修改 表单的部门树数据配置
            let dataSourceSelectData = setSelectFormart(
                this.dataSourceList,
                'datasourceName',
                'datasourceId'
            )
            this.searchFormConfig.formItems = setFormItemProp(
                this.searchFormConfig.formItems,
                'datasourceId',
                'options',
                dataSourceSelectData
            )
        },
        /**
         * 弹框确定
         */
        async handelCofimeDialog() {
            let rows = this.baseTableConfig.tableCheckedDatas
            if (rows.length > 0) {
                let tables = []
                if (Array.isArray(rows) && rows.length) {
                    for (let i = 0; i < rows.length; i++) {
                        const element = rows[i]
                        tables.push(element.tableName)
                    }
                } else {
                    tables = [rows.tableName]
                }
                let params = {
                    tables: tables,
                    datasolurceId: this.searchFormConfig.formSubmit.datasourceId
                }
                let assRes = await importTable(params)
                if (assRes && assRes.code === 0) {
                    this.$message.closeAll()
                    this.$message.success({ message: '新增成功！' })
                } else {
                    this.$message.closeAll()
                    this.$message.error({ message: '新增失败！' })
                }

                this.initPage()
            } else {
                this.$message({
                    type: 'error',
                    message: '请选择数据！'
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.import-table.page {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
    @include background_color('cover2');
    .search-contener {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: row,
            $justify: flex-start,
            $align: center
        );

        transition: all 0.5s;
    }
    .datas-contener {
        @include box_flex(
            $width: 100%,
            $height: auto,
            $direction: column,
            $justify: flex-start,
            $align: center,
            $flex-1: 1
        );
        .option-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: space-between,
                $align: center
            );
        }
        .table-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: center,
                $align: center,
                $flex-1: 1
            );

            padding: 10px 0;
        }
        .paging-contener {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-end,
                $align: center
            );
        }
    }
}
</style>
